<template>
  <div id="app">
    <!-- <div class="musicicon">
      <img
        :src="
          isOff
            ? require('./assets/img/music_on.png')
            : require('./assets/img/music_off.png')
        "
        id="ctrlbtn"
      />
    </div> -->
    <router-view />
  </div>
</template>

<script>
// 阻止页面的滑动默认事件
document.body.addEventListener(
  "touchmove",
  function (e) {
    e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
  },
  { passive: false }
); // passive 参数不能省略，用来兼容ios和android
import wx from "weixin-js-sdk";
export default {
  name: "App",
  data() {
    return {
      isOff: true,
      height: window.innerHeight, //页面高度
    };
  },
  created() {
    //刷新回到默认页面
    if (this.$route.path !== "/") {
      this.$router.replace("/");
    }
    //分享
    this.wxShare();
  },
  mounted() {
    // 背景音乐自动播放
    // function BGMAutoPlayMgr(url) {
    //   this.audioContext = new (window.AudioContext ||
    //     window.webkitAudioContext ||
    //     window.mozAudioContext)();
    //   this.sourceNode = null;
    //   this.buffer = null;
    //   this.isPlayingBGM = false;
    //   this.toggleBGM = function () {
    //     if (typeof this.sourceNode == "object") {
    //       if (this.isPlayingBGM) {
    //         this.sourceNode.stop();
    //         this.isPlayingBGM = false;
    //       } else this._playSourceNode();
    //     }
    //   };
    //   this._playSourceNode = function () {
    //     const audioContext = this.audioContext;
    //     audioContext.resume();
    //     const _sourceNode = audioContext.createBufferSource();
    //     _sourceNode.buffer = this.buffer;
    //     _sourceNode.loop = true;
    //     _sourceNode.connect(audioContext.destination);
    //     _sourceNode.start(0);
    //     this.sourceNode = _sourceNode;
    //     this.isPlayingBGM = true;
    //   };
    //   let loadAndAutoPlay = (audioUrl) => {
    //     const audioContext = this.audioContext;
    //     const xhr = new XMLHttpRequest();
    //     xhr.open("GET", audioUrl, true);
    //     xhr.responseType = "arraybuffer";
    //     xhr.onreadystatechange = () => {
    //       if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
    //         audioContext.decodeAudioData(xhr.response, (buffer) => {
    //           this.buffer = buffer;
    //           WeixinJSBridge.invoke("getNetworkType", {}, () =>
    //             this._playSourceNode()
    //           );
    //         });
    //       }
    //     };
    //     xhr.send();
    //   };
    //   // 播放
    //   loadAndAutoPlay(url);
    //   loadAndAutoPlay = null;
    //   this.isOff = false; //按钮状态
    // }

    // const bgm = new BGMAutoPlayMgr(require("./assets/media/bg.mp3"));

    // setTimeout(() => {
    //   if (this.CheckIsAndroid()) {
    //     //如果是Android
    //     bgm.toggleBGM();
    //   }
    // }, 500);
    // // 背景音乐控制按钮
    // let ctrlbtn = document.getElementById("ctrlbtn");
    // ctrlbtn.addEventListener("click", () => {
    //   bgm.toggleBGM();
    //   this.isOff = !this.isOff;
    // });

    //防止安卓手机软键盘弹起式撑起页面
    const originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        //键盘弹起与隐藏都会引起窗口的高度发生变化
        const resizeHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        if (resizeHeight - 0 < originalHeight - 0) {
          //当软键盘弹起，在此处操作
          // console.log("进入到软键盘弹起=========");
          document
            .querySelector("body")
            .setAttribute("style", "height:" + originalHeight + "px;");
          this.scrollerHeight = resizeHeight;
        } else {
          //当软键盘收起，在此处操作
          // console.log("进入到软键盘收起=========");
          document.querySelector("body").setAttribute("style", "height:100%;");
          this.scrollerHeight = "100%";
        }
      })();
    };
  },
  methods: {
    //分享
    wxShare() {
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("https://www.mahelei.com/index.php/Gm/Wechat/share", { url })
        .then((res) => {
          let data = res.data;
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "onMenuShareQQ",
              "onMenuShareWeibo",
              "onMenuShareQZone",
            ],
          });
        });
      wx.ready(() => {
        var shareData = {
          title: "标题...",
          desc: "副标题...",
          link: "",
          imgUrl: "",
          success: () => {},
        };
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
        wx.onMenuShareQZone(shareData);
      });
    },
    //禁止分享方式2
    wxNoShare() {
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("https://www.mahelei.com/index.php/Gm/Wechat/share", { url })
        .then((res) => {
          let data = res.data;
          let jslist = [];
          jslist = [
            "hideOptionMenu",
            "hideMenuItems",
            "hideAllNonBaseMenuItem",
          ];
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: jslist,
          });
        });
      wx.ready(() => {
        wx.hideAllNonBaseMenuItem();
      });
    },
    // 判断是否是安卓
    CheckIsAndroid() {
      var browser = {
        versions: (function () {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            //移动终端浏览器版本信息
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器 //u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf("iPad") > -1, //是否iPad
          };
        })(),
      };
      //if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
      //    return false;
      //}
      if (browser.versions.android) return true;
      return false;
    },
  },
};
</script>

<style lang="less">
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-align: center;
}
#app {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  font-size: 14px;
  color: #121212;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.musicicon {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 55px;
  height: 55px;
  z-index: 9;
  border-radius: 50%;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
  }
  .rotateimg {
    -webkit-animation: rotateimgani 3s linear infinite;
    animation: rotateimgani 3s linear infinite;
  }
  @keyframes rotateimgani {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotateimgani {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  p {
    margin: 0;
  }
}
.clmcenter {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.clmstart {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
.btnani {
  animation: btnanito 2s linear infinite;
}
@keyframes btnanito {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* 灰度 */
.gray {
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  // filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  // filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/*select和input设置相同大小*/
select,
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-style: none;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
select:focus,
input:focus {
  outline: 0;
}
select {
  background: #ffffff url(./assets/img/icon.png) no-repeat right center;
  background-size: 5% auto !important;
  background-position: right 3% top 1rem;
  text-align: center;
  text-align-last: center;
}
select::-ms-expand {
  display: none;
}
/*去除a标签点击时出现闪现黑背景  ——手机端*/
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus,
img {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: none;
  text-decoration: none;
}
// 禁止选中文本
p,
span,
a,
i,
div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
/* vant样式修改 */
.van-toast {
  width: auto !important;
  font-size: 1.8rem !important;
  padding: 20px !important;
}
.van-toast__text {
  padding: 1rem;
  line-height: 30px;
}
.van-loading__spinner {
  width: 40px !important;
  height: 40px !important;
}
</style>
